<template>
  <div class="rich-text-editing-container">
    <!-- 工具栏 -->
    <Toolbar
      :editorId="editorId"
      :default-config="toolConfig"
      mode="simple"
      ref="testRef"
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <div class="editor-container">
      <Editor
        :editorId="editorId2"
        :defaultConfig="editorConfig2"
        @onChange="titleChange"
        style="height:60px; overflow-y: hidden;"
      />
      <Editor
        :editorId="editorId"
        :defaultConfig="editorConfig"
        @onChange="contentChange"
        style="height: calc(100vh - 281px); overflow-y: hidden;"
      />
    </div>
  </div>
  <!-- <button @click="toArtDetail">展示</button> -->
  <!-- <button @click="test">test</button> -->
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'

import router from '../../route';

import { useArticleStore } from '../../store/article'
const articleStore = useArticleStore()

// 定义一个编辑器 id ，要求：全局唯一且不变！！！
const editorId = 'wangeEditor-1'
const editorId2 = 'wangeEditor-2'
// 工具栏配置
const toolConfig = {
  insertKeys: {
    index: 20, // 插入的位置，基于当前的 toolbarKeys
    keys: ['emotion', 'divider']
  },
  excludeKeys: [
    'fullScreen',
    'codeBlock',
    'todo',
    '|'
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  autoFocus: false
}
const editorConfig2 = {
  placeholder: '请输入标题...',
}

// 修改标题
const titleChange = (editor) => {
  articleStore.articleContent.title = editor.getHtml(editor.children).replace(/<\/?.+?\/?>/g, '')
  console.log(articleStore.articleContent);
}

// 修改内容
const contentChange = (editor) => {
  articleStore.articleContent.content = editor.getHtml(editor.children)
  console.log(articleStore.articleContent.content);
}

// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
  const editor = getEditor(editorId)
  if (editor == null) return

  // 销毁，并移除 editor
  editor.destroy()
  removeEditor(editorId)
})

const toArtDetail = () => {
  router.push('/artdetail')
}

const testRef = ref(null)
const test = () => {
  const editor = getEditor(editorId)
  const toolbar = DomEditor.getToolbar(editor)
  console.log(editor.getAllMenuKeys());
  console.log(toolbar.getConfig().toolbarKeys);
}

</script>

<style scoped>
.rich-text-editing-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.editor-container {
  flex: 1 auto;
}
.editor-container :deep(h1) {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 10px;
}
.editor-container :deep(h2) {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
}
.editor-container :deep(h3) {
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 10px;
}
.editor-container :deep(p) {
  margin: 8px 0px 0px 0px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400px;
  color: #323233;
}
.editor-container :deep(ul) {
  list-style: initial;
  margin: 10px 0 10px 20px;
}
.editor-container :deep(ol) {
  list-style: decimal;
  margin: 10px 0 10px 20px;
}
.editor-container :deep(.w-e-textarea-video-container) {
  border: none;
  width: 100%;
  padding: 0;
}
.editor-container :deep(iframe) {
  width: 100%;
}
.editor-container :deep(.w-e-textarea-divider) {
  margin: 0;
}
.editor-container :deep(blockquote) {
  display: block;
  border-left: 4px solid #dcdee0 !important;
  color: #8c96a0 !important;
  padding-left: 15px !important;
  line-height: 1.6 !important;
  margin: 10px 0 15px !important;
  background-color: #f7f8fa !important;
}
.editor-container :deep(blockquote > span) {
  background-color: transparent !important;
}
.editor-container :deep(img) {
  border-radius: 3px;
}
</style>
